<template>
  <div>
    <breadcrumb :queryActive="'second'"></breadcrumb>
    <div class="titleBox">
      <!-- icon-dingdan -->
      <div class="iconfontcolor icon-dingdan"></div>
      <div class="infoBox">
        <div class="info_line1">
          <h3 class="tit">收款单{{ result.steelNumber }}</h3>
          <!-- 0已结算 1未结算 -->
          <div class="tag" v-if="result.settlementStatus == 0">已结算</div>
          <div class="tag" style="background-color: #FFFCE8;color:#F8B030" v-else-if="result.settlementStatus == 1">待结算
          </div>
        </div>
        <div class="info_line2">
          <div style="margin-right: 15px">创建时间：{{ result.statementTime }}</div>
        </div>
      </div>
      <div class="feeGroup" v-if="result.settlementStatus == 0">
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">应付金额</div>
            <div class="price">{{ result.billAmount }}</div>
          </div>
        </div>
        <div class="feeBox">
          <div class="intervalLine"></div>
          <div class="feeItem">
            <div class="tit">实付金额</div>
            <div class="price" style="color: #1890ff">{{ result.settlementAmount }}</div>
          </div>
        </div>
      </div>

      <button class="examineBtn" @click="isShowDialog()" v-else-if="result.settlementStatus == 1">
        <span>结算</span>
      </button>
    </div>

    <div class="main">
      <el-tabs v-model="activeName" class="mainTabs" @tab-click="handleClick">
        <el-tab-pane label="结算单信息" name="first">
          <div class="infoBox">
            <div class="info_item">
              <titleVue :title="'基本信息'"></titleVue>
              <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
                color: '#939393',
                fontSize: '12px',
                fontWeight: 'bold',
                marginRight: '20px',
              }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">

                <el-descriptions-item label="关联运单">{{ result.waybillNo }}</el-descriptions-item>
                <el-descriptions-item label="关联订单">{{ result.orderNo }}</el-descriptions-item>
                <el-descriptions-item label="项目名称">{{ result.projectName }}</el-descriptions-item>
                <!--                <el-descriptions-item label="业务类型">-->
                <!--                  <div v-if="result.orderType == 1">拉货/搬家</div>-->
                <!--                  <div v-else-if="result.orderType == 2">B端承运订单</div>-->
                <!--                  <div v-else-if="result.orderType == 3">C端承运订单</div>-->
                <!--                  <div v-else-if="result.orderType == 4">供应商订单</div>-->
                <!--                  <div v-else-if="result.orderType == 5">撮合订单</div>-->
                <!--                </el-descriptions-item>-->

                <el-descriptions-item label="计价方式">
                  <!-- pricingMethod	integer($int32)
计价方式(参考pricing_method_type)1,按里程 2,按量 -->
                  <div v-if="result.pricingMethod == 1">按里程</div>
                  <div v-else-if="result.pricingMethod == 2">按量</div>
                </el-descriptions-item>
                <el-descriptions-item label="计量单位">
                  <!-- 计量单位(参考measure_unit_type)1,车2,吨3,件 -->
                  <div v-if="result.measureUnit == 1">车</div>
                  <div v-else-if="result.measureUnit == 2">吨</div>
                  <div v-else-if="result.measureUnit == 3">件</div>
                </el-descriptions-item>
                <el-descriptions-item label="司机姓名">{{ result.driverName }}</el-descriptions-item>
                <el-descriptions-item label="运量">
                  <div>
                    {{ result.cargoQuantity }}
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ result.phoneNumber }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="info_item">
              <titleVue :title="'运单审核信息'"></titleVue>
              <el-descriptions class="descriptionsInfo" :column="3" border :labelStyle="{
                color: '#262626',
                backgroundColor: '#DDDDDD',
                width: '120px',
                height: '40px',
                fontSize: '12px',
                fontWeight: 'bold',
                marginRight: '20px',
                padding: '10px',
              }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                <!-- waybillAuditResult	integer($int32)
审核结果0,未审核 1,作废 2,有异常 3, 合规 -->
                <el-descriptions-item label="审核结果">
                  <div v-if="waybillAuditInfoVo.waybillAuditResult == 0">未审核</div>
                  <div v-else-if="waybillAuditInfoVo.waybillAuditResult == 1">作废</div>
                  <div v-else-if="waybillAuditInfoVo.waybillAuditResult == 2">有异常</div>
                  <div v-else-if="waybillAuditInfoVo.waybillAuditResult == 3">合规</div>
                </el-descriptions-item>
                <el-descriptions-item label="审核人">{{ waybillAuditInfoVo.auditUser }}</el-descriptions-item>
                <el-descriptions-item label="审核时间">{{ waybillAuditInfoVo.resultTime }}</el-descriptions-item>
                <el-descriptions-item label="司机修正运量">{{ waybillAuditInfoVo.amendWeight }}</el-descriptions-item>
                <el-descriptions-item label="审核确定运量">{{
                  waybillAuditInfoVo.auditConfirmWeigh ? waybillAuditInfoVo.auditConfirmWeigh : '0'
                }}</el-descriptions-item>
                <el-descriptions-item label="审核司机运费">{{ waybillAuditInfoVo.amount ? waybillAuditInfoVo.amount : '0' +
                  '元'
                }}</el-descriptions-item>
                <el-descriptions-item label="异常扣款金额">{{ waybillAuditInfoVo.amountLose + '元' }}</el-descriptions-item>
                <el-descriptions-item label="司机上传附件">
                  <div style="color:#1890ff;cursor: pointer;" v-if="waybillAuditInfoVo.auditUrls != ''"
                    @click="downFile(waybillAuditInfoVo.auditUrls)">{{
                      '附件' + suffixName }}</div>
                  <div v-else>无</div>
                </el-descriptions-item>
                <el-descriptions-item label="审核说明">{{ waybillAuditInfoVo.resultInfo ? waybillAuditInfoVo.resultInfo :
                  '无'
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="info_item" v-if="result.settlementStatus == 0">
              <titleVue :title="'结算费用'"></titleVue>
              <el-descriptions border class="descriptionsInfo" :column="3" :labelStyle="{
                color: '#262626',
                width: '120px',
                fontSize: '12px',
                fontWeight: 'bold',
              }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                <el-descriptions-item label="司机金额">{{ result.billAmount + '元' }}</el-descriptions-item>
                <el-descriptions-item label="平台结算金额">{{ result.settlementAmount + '元' }}</el-descriptions-item>
                <el-descriptions-item label="保费">{{ result.payAmount ? result.payAmount : '无' }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="info_item">
              <titleVue :title="'定位信息'"></titleVue>
              <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
                color: '#262626',
                height: '40px',
                fontSize: '12px',
                fontWeight: 'bold',
                marginRight: '20px',
                padding: '10px',
              }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
  lineHeight: '40px',
}">
                <el-descriptions-item label="是否定位车辆">否</el-descriptions-item>
                <el-descriptions-item label="是否定位司机">否</el-descriptions-item>
                <el-descriptions-item label="轨迹状态">无</el-descriptions-item>
                <el-descriptions-item label="车辆定位数量">0</el-descriptions-item>
                <el-descriptions-item label="司机定位数量">0</el-descriptions-item>
                <el-descriptions-item label="异常原因">无</el-descriptions-item>
              </el-descriptions>
            </div>


          </div>
        </el-tab-pane>
        <el-tab-pane label="运单信息" name="second">
          <div class="infoBox">
            <div class="info_item">
              <titleVue :title="'运单信息'"></titleVue>
              <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
                color: '#939393',
                fontSize: '12px',
                fontWeight: 'bold',
                marginRight: '20px',
              }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                <el-descriptions-item label="订单编号">{{ waybillData.orderNo }}</el-descriptions-item>
                <el-descriptions-item label="项目名称">{{ waybillData.projectName }}</el-descriptions-item>
                <el-descriptions-item label="计价方式">
                  {{ waybillData.pricingMethodStr }}
                </el-descriptions-item>
                <el-descriptions-item label="计量单位">{{ waybillData.measureUnitStr }}</el-descriptions-item>
                <el-descriptions-item label="运量">{{ waybillData.cargoWeight }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ waybillData.contact }}</el-descriptions-item>
                <el-descriptions-item label="车牌号">{{ waybillData.numberplate }}</el-descriptions-item>
                <el-descriptions-item label="车辆类型" :span="2">{{ waybillData.vehicleType }}</el-descriptions-item>
                <el-descriptions-item label="参数">
                  <div>
                    载重{{ waybillData.loadCapacity }}吨, 车厢长{{ waybillData.carriageLength }}米, 车{{ waybillData.vehicleHeight
                    }}高米,
                    载方{{ waybillData.loadSide }}方
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="品牌型号">{{ waybillData.brandModel }}</el-descriptions-item>
                <el-descriptions-item label="规格">{{ waybillData.specification }}</el-descriptions-item>
                <el-descriptions-item label="车辆照片">
                  <div class="picBox">
                    <img class="pic" alt="" :src="waybillData.driverPhoto" />
                  </div>

                </el-descriptions-item>
                <el-descriptions-item label="司机照片">
                  <div class="picBox">
                    <img class="pic" alt="" :src="waybillData.vehiclePhotos" />
                  </div>
                </el-descriptions-item>
              </el-descriptions>

            </div>

          </div>
        </el-tab-pane>
      </el-tabs>
    </div>



    <!--    <el-button type="text" size="small" @click="$router.push('/orderManagement/SettlementDoc/paymentOrderDetails/' + 4564)">测试详情</el-button>-->
    <el-dialog class="CollectionDialog" title="车队结算" :visible.sync="dialogVisible" width="400px">
      <el-form :model="CollectionForm" :rules="CollectionRules" ref="CollectionForm" label-width="100px" class="demoForm">
        <el-form-item label="应付金额" prop="billAmount">
          <el-input v-model="CollectionForm.billAmount" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="实付金额" prop="settlementAmount">
          <el-input v-model="CollectionForm.settlementAmount" onkeyup="value=value.replace(/[^\d.]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="statementRemark">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" show-word-limit maxlength="30" :rows="2"
            placeholder="请输入内容" v-model="CollectionForm.statementRemark">
          </el-input>
        </el-form-item>



        <el-form-item>
          <div class="BtnBox">
            <el-button class="Btn" @click="dialogVisible = false">取消</el-button>
            <el-button class="Btn" type="primary" @click="submitForm('CollectionForm')">确定</el-button>
          </div>

        </el-form-item>



      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import titleVue from '@/components/titleVue';
import httpApi from "@/http";
import BASEURL from "@/http/BaseUrl";
export default {
  data() {
    let validatePayRule = (rule, value, callback) => {
      let regular = /^([1-9]\d*(\.\d*[1-9][0-9])?)|^(0\.\d*[1-9][0-9])$|^(0\.\d*[1-9])$/

      if (value == '') {
        callback(new Error('金额不能为空'))
      } else if (value.split('.').length > 2) {
        callback('只能有一个小数点')
      } else if (!regular.test(value)) {
        callback(new Error('请输入正确面额金额'))
      } else {
        callback()
      }
    };
    return {
      waybillData: {},//运单信息详情数据
      waybillId: "",
      result: {},
      fileList: [],//上传文件
      activeName: "first",
      dialogVisible: false,
      oderState: '0',//假数据 核算状态
      records: [],
      suffixName: "",
      waybillAuditInfoVo: {},//运单审核信息
      CollectionForm: {
        billAmount: "",
        settlementAmount: "",//实付金额
        statementRemark: "",//备注
      },
      CollectionRules: {
        billAmount: [
          { required: true, message: '应付金额不能为空', trigger: 'blur' }
        ],
        settlementAmount: [{
          validator: validatePayRule,
          trigger: "blur",
        }],
        statementRemark: [{ max: 30, message: '最大30个字符', trigger: 'blur' }]
      },
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      url: BASEURL.TCHYURL + "/file/upload",

    };
  },
  created() {
    ////console.log()
  },
  methods: {
    downFile(url) {
      window.open(url)
    },
    handleClick() {

    },
    routeToDetail(id) {
      ////console.log("运单ID=", id)
      this.$router.push('/orderManagement/WaybillManagement/Details/' + id)
    },
    // 获取详情
    initDetails() {
      ////console.log(11111111111, this.$route.params)
      let params = {
        driverBillId: this.$route.query.driverBillId,
      }
      httpApi.carrierSettlementApi.PaymentDriverDetails(params).then(res => {
        if (res.data.code == 200) {
          this.result = res.data.data;
          this.waybillAuditInfoVo = res.data.data.waybillAuditInfoVo

          this.CollectionForm.billAmount = res.data.data.billAmount;
          this.waybillId = res.data.data.waybillId

          let params2 = {
            waybillId: this.waybillId
          }
          ////console.log(params2);
          httpApi.carrierSettlementApi.SettleAccountsWaybillDetails(params2).then(res => {
            ////console.log('运单信息详情', res);
            this.waybillData = res.data.data

          })



        }
        ////console.log("详情数据", res.data.data)

      })



    },
    goUrl(url) {
      window.open(url, "_blank")
    },

    isShowDialog() {
      this.dialogVisible = true
    },
    submitForm(CollectionForm) {

      this.$refs[CollectionForm].validate((valid) => {
        if (valid) {
          let params = {
            driverBillId: this.$route.query.driverBillId,
            settlementAmount: this.CollectionForm.settlementAmount,
            statementRemark: this.CollectionForm.statementRemark
          }
          httpApi.carrierSettlementApi.driverSettleAccounts(params).then(res => {
            ////console.log('结算', res);
            if (res.data.code == 200) {
              this.$message.success("收款单结算成功")
              this.initDetails()

              //this.$router.go(0);
            } else {
              this.$message.error("收款单结算失败")
              return false;
            }
          })
        } else {

          ////console.log('error submit!!');
          return false;
        }
      });
    },
    handleRemove(file, fileList) {
      ////console.log(file, fileList);
      this.fileList = []
    },
    handlePreview(file) {
      ////console.log(file, 3333);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onSuccess(response, file, fileList) {
      ////console.log(response)
      this.CollectionForm.annex = response.data.url;
      this.fileList.push({ name: response.data.name, url: this.response.data.url })
    },



  },
  mounted() {
    this.initDetails();
  },
  components: {
    breadcrumb,
    titleVue,
  },
};
</script>

<style lang="scss" scoped>
.titleBox {
  flex: 1;
  background-color: #fff;
  height: 119px;
  display: flex;
  align-items: center;
  padding: 0 35px;
  margin-bottom: 9px;

  .feeGroup {
    margin-left: auto;
    display: flex;

    .feeBox {
      display: flex;
      width: 180px;
      align-items: center;


      .intervalLine {
        width: 2px;
        height: 64px;
        background-color: #f0f0f0;
        margin-right: 20px;
      }

      .feeItem {
        display: flex;
        flex-direction: column;
        margin-right: 20px;

        .tit {
          color: #a3a3a3;
          font-size: 12px;
          margin-bottom: 14px;
        }

        .price {
          color: #262626;
          font-size: 18px;
          font-weight: Bold;
        }
      }
    }
  }

  .icon-dingdan {
    font-size: 43px;
    margin-right: 10px;
  }

  .infoBox {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .info_line1 {
      margin-bottom: 3px;
      display: flex;
      align-items: center;

      >.tit {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        margin-right: 8px;
        color: #262626;
      }

      >.tag {
        background-color: #ecf5fe;
        border-radius: 4px;
        width: 54px;
        height: 20px;
        color: #1890ff;
        font-size: 10px;
        text-align: center;
        line-height: 20px;


      }
    }

    .info_line2 {
      display: flex;
      color: #939393;
      font-size: 12px;
    }
  }

  .examineBtn {
    background-color: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    width: 80px;
    height: 36px;
    cursor: pointer;
    margin-left: auto;

    &:hover {
      opacity: 0.8;
      transition: 0.2s;
    }


  }
}



.CollectionDialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    padding: 0 20px 0px;
    height: 50px;
    line-height: 50px;
  }

  ::v-deep .el-textarea .el-input__count {
    background-color: transparent;
    bottom: -8px;
  }

  ::v-deep .el-form-item__label {
    color: #262626;
    font-size: 12px;
    line-height: 32px;

  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 34px 24px 29px;
  }

  .BtnBox {
    display: flex;
    justify-content: flex-end;

    .Btn {
      height: 36px;
      width: 80px;
      font-size: 12px;
    }

  }

  // 上传文件
  .upload {
    .uploadBtn {
      width: 80px;
      height: 32px;
      background-color: #1890ff;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
      border-radius: 4px;
      transition: 0.2s;
      margin-right: 12px;
      margin-bottom: 8px;

      &:hover {
        opacity: 0.8;
      }
    }

    .el-upload__tip {
      color: #cccccc;
      font-size: 12px;
    }

    ::v-deep .el-upload-list {
      background-color: #eef3f9;
    }


  }


}

.main {
  background-color: #fff;
  height: calc(100vh - 255px);

  .mainTabs {

    ::v-deep .el-tabs__nav {
      margin-left: 35px;
    }

    // 标签页切换按钮
    ::v-deep .el-tabs__item {
      height: 48px;
      width: 88px;
      text-align: center;
      padding: 0;
      line-height: 48px;
      font-size: 12px;
      font-weight: bold;
      color: #939393;
    }

    // 下边框
    ::v-deep .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #F0F0F0;
    }

    // 标签页切换按钮 激活样式
    ::v-deep .el-tabs__item.is-active {
      background-color: #ECF5FE;
      color: #1890FF;
    }

    .infoBox {
      padding: 35px;
      background-color: #fff;

      .info_item {
        margin-bottom: 40px;

        .list {
          border: 1px solid #F0F0F0;

          .routeBox {
            display: flex;
          }
        }
      }
    }
  }

}

.descriptionsInfo {
  .picBox {
    width: 80px;
    height: 60px;
    border-radius: 6px;

    .pic {
      width: 80px;
      height: 60px;

    }
  }
}
</style>

